<!--使用query传参数-->
<template>
  <div>
<!--    导航区-->
    <ul>
      <li v-for="item in newsList" :key="item.id">
<!--          第一种写法 路径 ? key=value & key=value-->
<!--        <RouterLink :to="`/b/news?id=${item.id}&title=${item.title}&content=${item.content}`">{{item.title}}</RouterLink>-->
<!--     第二种写法   -->
        <RouterLink :to="{
          path:'/b/news',
          query:{
            id: item.id,
            title:item.title,
            content:item.content
          }
        }">
          {{item.title}}
        </RouterLink>
      </li>
    </ul>
<!--    展示区-->
    <div class="bind">
      <RouterView></RouterView>
    </div>
  </div>
</template>

<script setup lang="ts">
import {reactive} from "vue";
import {RouterLink} from "vue-router"
const newsList = reactive([
  {id:1,title:"新闻1",content:"新闻1的内容"},
  {id:2,title:"新闻2",content:"新闻2的内容"},
  {id:3,title:"新闻3",content:"新闻3的内容"},
  {id:4,title:"新闻4",content:"新闻4的内容"},
])
</script>
<style scoped>
.bind{
  width: 200px;
}
</style>